<!--
 * @Author: Rain
 * @Date: 2021-11-24 22:42:40
 * @LastEditTime: 2024-01-15 10:30:25
 * @Description: Do Something
-->
<template>
  <div class="w-full editor">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="form.content"
      style="height: 300px; overflow-y: hidden"
      :default-config="editorConfig"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import cookie from 'js-cookie'
export default {
  name: 'RichText',
  components: {
    Editor,
    Toolbar
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        excludeKeys: ['codeBlock']
      },
      editorConfig: {
        placeholder: '请输入内容...',
        readOnly: false,
        MENU_CONF: {
          uploadImage: {
            server: '/api/localStorage/pictures',
            fieldName: 'file',
            withCredentials: true,
            meta: {
              name: new Date().getTime()
            },
            headers: {
              Authorization: cookie.get('EL-ADMIN-TOEKN')
            },
            onBeforeUpload(files) {
              return files
              // 返回值可选择：
              // 1. 返回一个数组（files 或者 files 的一部分），则将上传返回结果中的文件
              // 2. 返回 false ，则终止上传
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {
              console.log(`${file.name} 上传成功`, res)
            },
            // 单个文件上传失败
            onFailed(file, res) {
              console.log(`${file.name} 上传失败`, res)
            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res)
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              const { path } = res
              const url = path.replace('/home/eladmin/', `${process.env.VUE_APP_BASE_API}/`)
              insertFn(url)
            }
          }
        }
      },
      curContent: [],
      form: {
        content: null,
        allContent: null
      }
    }
  },

  watch: {
    content: {
      handler(n) {
        this.form.content = n
      },
      immediate: true
    }
  },
  // 及时销毁 editor
  beforeDestroy() {
    if (this.editor == null) return
    // 销毁，并移除 editor
    this.editor.destroy()
  },
  methods: {
    getContent() {
      if (this.editor == null) return
      if (this.editor.isEmpty()) {
        this.form.content = null
      } else {
        this.form.content = this.editor.getHtml()
      }
      return this.form.content
    },
    // initEditor() {
    //   const editor = getEditor(this.editorId)
    //   if (editor == null) return
    //   if (this.form.allContent) {
    //     editor.clear()
    //     const content = JSON.parse(this.form.allContent)
    //     SlateTransforms.insertNodes(editor, content)
    //     SlateTransforms.removeNodes(editor, { at: [0] })
    //   } else {
    //     editor.clear()
    //   }
    // },
    onCreated(editor) {
      this.editor = Object.seal(editor)
      editor.setHtml(this.content || '')
    },
    onChange(editor) {
      this.curContent = editor.children
    }
  }
}
</script>

<style scoped>
.editor {
  border: 1px solid #ccc;
}
</style>
